import 'package:flutter/material.dart';

class CustomMultiChildLayoutWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text("CustomMultiChildLayout"),
          leading: new BackButton(),
        ),
        body: new Container(
          width: 200,
          height: 100,
          color: Colors.yellow,
          child: CustomMultiChildLayout(
            delegate: ZLayoutDelegate(),
            children: <Widget>[
              LayoutId(
                  id: ZLayoutDelegate.title,
                  child: new Text(
                    'This is title',
                    style: TextStyle(fontSize: 18, color: Colors.black),
                  )),
              LayoutId(
                id: ZLayoutDelegate.description,
                child: Text(
                  'This is description',
                  style: TextStyle(fontSize: 14, color: Colors.grey),
                ),
              ),
            ],
          ),
        ));
  }
}

class ZLayoutDelegate extends MultiChildLayoutDelegate {
  static const String title = 'title';
  static const String description = 'description';

  @override
  void performLayout(Size size) {
    final BoxConstraints constraints = new BoxConstraints(maxWidth: size.width);
    final Size titleSize = layoutChild(title, constraints);
    positionChild(title, new Offset(0, 0));

    final double descriptionY = titleSize.height;
    layoutChild(description, constraints);
    positionChild(description, new Offset(0.0, descriptionY));
  }

  @override
  bool shouldRelayout(MultiChildLayoutDelegate oldDelegate) => false;
}
